import ProductService from "../../../dataservice/ProductService"
const productService = new ProductService

// miniprogram/pages/shop/search/search.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputShowed: true,
    inputVal: '',
    hotSearchProducts: [], //热搜词
    searchedKeywords: [], //历史搜索记录
    inputFocused: false, // 文本框是否获取焦点
    suggestKeywords: [], // 存储的是当前输入内容匹配的搜索建议
    isNoMoreData: false // 是否没有更多数据了。false：还有更多数据；true：没有更多数据可
  },
  /**
   * 文本框获取焦点时触发的事件
   * 目的是当用户输入内容后，显示搜索建议
   */
  inputFocus() {
    this.setData({
      inputFocused: true
    })
  },
  /**
   * 在搜索框中输入内容时
   * 1)将搜索框的内容同步到inputVal变量中
   * 2)实时获取搜索建议
   */
  inputTyping(e) {
    this.setData({
      inputVal: e.detail.value
    })
    // 从本地的json文件中读取到匹配的搜索词，设置给 suggestKeywords数组在页面进行显示
    let result = productService.getSuggestWords(this.data.inputVal)
    this.setData({
      suggestKeywords: result
    })
  },
  /**
   * 用户点击清除按钮时触发的事件
   * 1）清空文本框的内容
   * 2）重置suggestKeywords数组为空数组
   */
  clearInput() {
    this.setData({
      inputVal: '',
      suggestKeywords: []
    })
  },
  inputBlur() {
    this.setData({
      inputFocused: false
    })
  },
  /**
   * 点击 热门搜索、历史记录以及搜索建议中的词汇触发的事件
   * 在这个事件中，根据这个词汇进行商品搜索
   */
  onClickTags(e) {

    // 将点击的词汇赋值给 inputVal，因为 getProductList 方法需要根据这个变量的值进行搜索
    this.setData({
      inputVal: e.currentTarget.id
    })
    // 编程式的调用搜索方法
    this.onClickSearchButton()
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    // 设置热搜词
    this.setData({
      hotSearchProducts: productService.getHotSearchProducts()
    })
    // 设置历史记录
    this.initSearchedKeywords()
  },
  /**
   * 设置搜索的历史记录
   * 1）搜索记录是与用户相关的
   * 2）一般来说，搜索记录是不会同步的，不会保存到服务器，而是保存到客户端（保存到用户的手机中）
   * 3）用户点击搜索按钮后，将搜索记录保存到缓存中
   * 4）搜索页面展示时，获取缓存中的保存的搜索记录
   * 5）点击删除按钮时，删除当前小程序的全部缓存
   */
  initSearchedKeywords() {
    let value = wx.getStorageSync('searchKeyWords')
    if (value) {
      this.setData({
        searchedKeywords: value
      })
    }
  },
  /**
   * 添加历史记录到缓存
   * 1)首先读取缓存数据
   * 2）如果缓存中没有数据，则初始化、
   * 3）如果缓存中存在数据，则累加
   * 4）将设置后的缓存数据更新会缓存
   * 5）重新刷新当前页面中的  searchedKeywords 变量的值
   */
  addSearchKeyWrods() {
    // 搜索的关键词
    let keyword = this.data.inputVal
    // 读取已有的缓存
    let value = wx.getStorageSync('searchKeyWords')
    if (value) {
      // 存在缓存
      // 检测缓存记录中是否存在当前搜索的关键词
      if (value.indexOf(keyword) < 0) {
        value.push(keyword)
      }
    } else {
      // 缓存为空
      value = []
      value.push(keyword)
    }
    this.setData({
      searchedKeywords: value
    })
    // 更新缓存
    wx.setStorageSync('searchKeyWords', value)
    //wx.setStorageSync('searchKeyWords', this.data.inputVal)
  },
  /**
   * 点击搜索按钮时触发的事件
   * 1）添加历史搜索记录到缓存
   * 2）搜索对应的商品并展示
   */
  onClickSearchButton() {
    // 设置历史记录
    this.addSearchKeyWrods()
    this.getProductList(true)
  },
  getProductList(isReset) {
    // 在导航条显示加载动画
    wx.showNavigationBarLoading()
    productService.getProductList('', this.data.inputVal, isReset)
      .then(res => {
        if (res.data.length <= 0) {
          this.setData({
            isNoMoreData: true
          })
        }
        this.selectComponent('#productList').fillData(isReset, res.data)
        // 在导航条隐藏加载动画
        wx.hideNavigationBarLoading()
      })
      .catch(err => {
        console.log(err)
      })
  },
  // 清除当前小程序中的搜索历史记录缓存
  clearSearchedKeywords() {
    this.setData({
      searchedKeywords: []
    })
    // 清理缓存数据
    wx.removeStorage({
      key: 'searchKeyWords',
      fail(err) {
        console.log(err)
      }
    })
  },
  onReachBottom() {
    if (!this.data.isNoMoreData) {
      this.getProductList(false)
    }
  }
})